<html>

<head>
    <meta charset="UTF-8">
    <title>头脑王者网页版</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script type="text/javascript">
        // 根据屏幕的宽度 来设置 html的 font-size
        // 设备的宽度
        console.log(window.screen.width);
        // 浏览器 可用的宽度
        // 移动端 用上下 两个都是可以
        console.log(window.screen.availWidth);
        // 计算 font-weight
        var fontSize = window.screen.availWidth / 20;
        document.querySelector('html').style.fontSize = fontSize + 'px';
        window.onresize = function () {
          // 计算 font-weight
          var fontSize = window.screen.availWidth / 20;
          document.querySelector('html').style.fontSize = fontSize + 'px';
        }
        // 跟媒体查询比 在移动端使用 没有优劣之分  
        // 面试问道 媒体查询 还有 js 都回答 即可
    </script>
    <style>
        html,body{
            margin: 0;
            width: 100%;
        }
        body{
            background: url("src/static/img/bg.jpg") no-repeat;  
        }
    </style>
</head>

<body>
<div id="app"></div>
</body>

</html>